import React, { Component } from 'react'
import { Card, Button, Col, Row } from 'antd'
import './RoomShow.css'
import 'antd/dist/antd.css'

export default class roomshow extends Component {
    constructor(props) {
        super(props)

    }

    _reduce = room => {
        room.count -= 1
        this.setState({ room })
    }
    _add = room => {
        room.count += 1
        this.setState({ room })
    }
    _buy = room => {
        this.props.buy(room)
    }
    render() {
        return (
            <div>
                <Row gutter={[16, 16]}>
                    {this.props.rooms.rooms.map(room =>
                        <Col span={5}>
                            <Card
                                hoverable
                                style={{ width: 240 }}
                                cover={<img alt="example" src={room.img} style={{ height: 150 }} />}
                            >
                                <div id="textArea">
                                    <div>
                                        <p>{room.name}</p>
                                    </div>
                                    <div id="price">
                                        <p>{room.price + "元/间"}</p>
                                        <input type="button" value='-' onClick={() => this._reduce(room)} />
                                        <input type="text" style={{ width: 30 }} value={room.count} />
                                        <input type="button" value='+' onClick={() => this._add(room)} />
                                    </div>
                                    <Button type="primary" danger onClick={() => this._buy(room)}>订 购</Button>
                                </div>
                            </Card>
                        </Col>
                    )}
                </Row>
            </div>
        )
    }
}
